import { ajax, tools } from '../../js/ajax.js';

//#region  添加的部分
let username = document.getElementById('username');
let phone = document.getElementById('phone');
let qq = document.getElementById('qq');
let wechat = document.getElementById('wechat');
let btnAdd = document.getElementById('btnAdd');

btnAdd.addEventListener('click', () => {
  ajax.post(
    '/user/contact/add',
    {
      username: username.value,
      phone: phone.value,
      qq: qq.value,
      wechat: wechat.value,
    },
    (data) => {
      console.log(data);
      showToast(data.message);
    }
  );
});

//#endregion

//#region 弹出层提升框

let liveToast = document.getElementById('liveToast');
const toast = new bootstrap.Toast(liveToast);
//#liveToast . toast-body
//querySelector是通过css选择器获取页面上的元素（只会返回一个）
const toastBody = document.querySelector('#liveToast .toast-body');
console.log('toastBady===>', toastBody);
function showToast(message) {
  toastBody.innerHTML = message;
  toast.show();
}
//#endregion

//#region 查询的部分

//分页的参数
let page = {
  pageNumber: 1,
  pageSize: 5,
};

//查询过滤条件
let queryInfo = {
  title: '',
  info: '',
};

//联系人列表
let list = [];

let tbdata = document.getElementById('tbdata');

let btnQuery = document.getElementById('btnQuery');

let qusername = document.getElementById('qusername');

let qphone = document.getElementById('qphone');

btnQuery.addEventListener('click', () => {
  page.pageNumber = 1;
  queryInfo.username = qusername.value;
  queryInfo.phone = qphone.value;
  query();
});

function query() {
  ajax.post(
    '/user/contact/queryAll',
    tools.mergeJson(page, queryInfo),
    (data) => {
      if (data.success) {
        list = data.list;
        page = data.page;
        showData();
        showPage();
      } else {
        showToast(data.message);
      }
    }
  );
}

function showData() {
  tbdata.innerHTML = '';

  for (let i = 0; i < list.length; i++) {
    let info = list[i];
    let tr = document.createElement('tr');
    let td;
    //联系人姓名
    td = document.createElement('td');
    td.append(info.username);
    tr.append(td);

    //手机号码
    td = document.createElement('td');
    td.append(info.phone);
    tr.append(td);

    //QQ号码
    td = document.createElement('td');
    td.append(info.qq);
    tr.append(td);

    //微信号码
    td = document.createElement('td');
    td.append(info.wechat);
    tr.append(td);

    //信息最后修改时间
    td = document.createElement('td');
    td.append(tools.formatDate(info.lastupdate));
    tr.append(td);

    //操作的部分
    td = document.createElement('td');
    //修改按钮
    let btn01 = document.createElement('button');
    btn01.append('修改');
    btn01.classList.add('btn', 'btn-primary', 'btn-sm');
    btn01.addEventListener('click', () => {
      showModify(info);
    });
    td.append(btn01);

    //删除按钮
    let btn02 = document.createElement('button');
    btn02.append('删除');
    btn02.classList.add('btn', 'btn-danger', 'btn-sm', 'ms-1');
    btn02.addEventListener('click', () => {
      showDelete(info);
    });
    td.append(btn02);

    tr.append(td);

    tbdata.append(tr);
  }
}

//分页相关的部分 =====================
//获取到所有的分页a标记
//a.page-link表示必须是a标记且带有page-link的class
//querySelectorAll表示获取对应css选择器的所有元素
let elepages = document.querySelectorAll('a.page-link');
console.log('分页相关的a标记', elepages);

function showPage() {
  elepages[1].innerHTML = `
当前页/总页数/记录数: 
${page.pageNumber}/${page.pageCount}/${page.total}
`;
}
//下一页
elepages[2].addEventListener('click', () => {
  page.pageNumber++;
  if (page.pageNumber > page.pageCount) {
    page.pageNumber = page.pageCount;
    return;
  }
  query();
});

//上一页
elepages[0].addEventListener('click', () => {
  page.pageNumber--;
  if (page.pageNumber < 1) {
    page.pageNumber = 1;
    return;
  }
  query();
});

query();
//#endregion

//#region 修改的部分
let modifyInfo;
let modifyDialog = document.getElementById('modifyDialog');
let musername = document.getElementById('musername');
let mphone = document.getElementById('mphone');
let mqq = document.getElementById('mqq');
let mwechat = document.getElementById('mwechat');
let btnModify = document.getElementById('btnModify');

let mdialog = new bootstrap.Modal(modifyDialog);

function showModify(info) {
  console.log('修改的信息', info);
  modifyInfo = info;
  musername.value = info.username;
  mphone.value = info.phone;
  mqq.value = info.qq;
  mwechat.value = info.wechat;

  mdialog.show();
}

btnModify.addEventListener('click', () => {
  modifyInfo.username = musername.value;
  modifyInfo.phone = mphone.value;
  modifyInfo.qq = mqq.value;
  modifyInfo.wechat = mwechat.value;
  ajax.post('/user/contact/update', modifyInfo, (data) => {
    showToast(data.message);
  });
});

//#endregion

//#region 删除的部分
let delInfo;
let delDialog = document.getElementById('delDialog');
let btnDel = document.getElementById('btnDel');
let delbody = document.querySelector('#delDialog .modal-body');

let ddialog = new bootstrap.Modal(delDialog);

function showDelete(info) {
  console.log('删除的信息', info);
  delInfo = info;
  delbody.innerHTML = `确定删除：${info.username}的信息？`;
  ddialog.show();
}
btnDel.addEventListener('click', () => {
  ajax.post('/user/contact/delete', { ucid: delInfo.ucid }, (data) => {
    showToast(data.message);
    ddialog.hide();
  });
});
//#endregion

//#region 关闭重查
let addDialog = document.getElementById('addDialog');
addDialog.addEventListener('hidden.bs.modal', query);
modifyDialog.addEventListener('hidden.bs.modal', query);
delDialog.addEventListener('hidden.bs.modal', query);
//#endregion
